<script type="text/javascript">
	Yutil.en.enhance();
</script>

<ul>
	<li>
		Create a dialog by calling <b>Yutil.createDialog(id, width, height, title, ...)</b>
	</li>
	<li>
		Update title by calling <b>Yutil.setDialogTitle(id, title)</b>
	</li>
	<li>
		Get content "div" by calling <b>$(id+"_content")</b>, update its innerHTML as you like.
	</li>
	<li>
		Show/Hide a dialog by calling <b>Yutil.showDialog(id)</b> and <b>Yutil.hideDialog(id)</b>
	</li>
	<li>
		To dispose, call <b>Yutil.disposeDialog(id)</b>
	</li>
	<li>
		See source code of this page for more details
	</li>
</ul>

<hr/>

<p>
	<button id="btnTest" onclick="this.testDialog()">See it works</button>
</p>

<script>
	$('btnTest').testDialog = function() {
		if (!$('testDialog'))
			Yutil.createDialog('testDialog', '80%', '80%', 'Sample dialog');
		
		$('testDialog_content').innerHTML = '<button onclick="$(\'btnTest\').testDialog2()">2nd level dialog</button><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p><p>(try scroll)</p>';
		
		Yutil.showDialog('testDialog');
	}
	
	$('btnTest').testDialog2 = function() {
		if (!$('testDialog2'))
			Yutil.createDialog('testDialog2', '50%', '30%', '2nd level dialog');
		
		$('testDialog2_content').innerHTML = '<p>Hi, I am the 2nd level dialog!</p>';
		
		Yutil.showDialog('testDialog2');
	}
</script>

<%@ page contentType="text/html;charset=UTF-8" buffer="none" %>